<template>
	<view class="page-view">
		<nav-view :defaultShow="true" :title="''"></nav-view>
		<view class="page-conte">
			<view class="title-h2">
				<image class="icon" src="../../static/images/title-zx.png" mode=""></image>
			</view>
			<div class="staice-box is-flex" @click="touchPop" :style="'top:' + (statusBarHeight+57) + 'px'">
				<i class="iconfont icon-shuoming-01"></i>
				<text class="msg">说明</text>
				
			</div>
			<view class="list-view-box">
				
				<view class="item-box is-flex"  @click="touchList(item)" v-if="currentConsultCount > 0">
					<img class="icon" src="@/static/images/icon-zx-01.png" alt="">
					<view class="massage-info-box">
						<view class="name-box is-flex">
							<text class="name">进行中的咨询</text>
							<text class="time">{{currentConsult.time}}</text>
						</view>
						<div class="text-box">{{currentConsult.title}}</div>
					</view>
					
				</view>
				
				<view class="item-box is-flex" v-for="(item,index) in list" :key="index" @click="gotoOnlineMessage(item)">
					<img class="icon" src="@/static/images/icon-zx-02.png" alt="">
					<view class="massage-info-box">
						<view class="name-box is-flex">
							<text class="name">{{item.name}}</text>
							<text class="time">{{item.time}}</text>
						</view>
						<div class="text-box">{{item.text}}</div>
					</view>
				</view>
				<view v-if="currentConsultCount == 0 && list.length == 0" class="no-date">
					没有数据
				</view>
			</view>
		</view>
		<!-- 说明弹框 -->
		<u-transition  :show="showPop" duration="30" timingFunction="ease">
			<view class="pop-view">
				<view class="pop-conte">
					<view class="title-box">
						<img class="icon" src="@/static/images/title-sm.png" alt="">
					</view>
					<view class="conte-box">
						我们将尽量实时匹配专业律师解答您的咨询，根据律师在线情况和平台咨询数，律师回复可能会有延迟。超过30天仍未有律师回复的咨询将会自动关闭并清除。
					</view>
					<view class="btn-box" @click="touchClose">
						确定
					</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:[
					// {name:'进行中的咨询',header:require('@/static/images/icon-zx-01.png'),time:'19:32',text:'[图片]'},
					// {name:'金盾法律-张三',header:require('@/static/images/icon-zx-01.png'),time:'16:12',text:'您想和家里人商量一下，我也...'},
					// {name:'金盾法律-李四',header:require('@/static/images/icon-zx-01.png'),time:'2023-03-27  11:59',text:'为了能更好地帮您解决问题，...'},
					// {name:'金盾法律-王五',header:require('@/static/images/icon-zx-01.png'),time:'2023-03-27  11:59',text:'昨天我发给你的案例看了没有...'}
				],
				showPop:false,
				statusBarHeight: getApp().globalData.statusBarHeight,
				currentConsult:{},
				currentConsultCount:0
			}
		},
		onShow() {
			this.getData();
		},
		methods:{
			init(){
				
			},
			getData() {
				let self = this;
				self.isloadding = true;
				self._get('consult.consult/getConsultList', {}, function(res) {
					
					self.currentConsult = res.data.currentConsult;
					self.currentConsultCount = res.data.currentConsultCount;
					self.list = res.data.list;
					
					self.loadding = false;
					uni.stopPullDownRefresh();
					self.isloadding = false;
				});
			},
			touchPop(){
				this.showPop = true
			},
			touchClose(){
				this.showPop = false
			},
			touchList(item){
				uni.navigateTo({
					url:'/pages/mine/consultationList'
				})
			},
			gotoOnlineMessage(item){
				uni.navigateTo({
					url:'/pages/onlineMessage/index?consultId='+item.consult_id
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.title-h2 {
		width: 100%;
		padding: 0 40rpx;
	}
	
	.title-h2 .icon {
		width: 239rpx;
		height: 86rpx;
	}
	
	.title-h2 .pt {
		display: block;
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #666666;
	}
	
	.staice-box {
		position: fixed;
		right: 0;
		top: 120rpx;
		line-height: 80rpx;
		background: #F1F1F1;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(125,125,125,0.25);
		padding: 0 30rpx;
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #666666;
		border-radius: 40rpx 0 0 40rpx;
	
	}
	
	.staice-box .iconfont {
		font-size: 46rpx;
		width: 40rpx;
		margin-right: 10rpx;
		
	}
	.list-view-box {
		margin-top: 30rpx;
		padding: 0 40rpx;
	}
	.item-box {
		padding: 40rpx 0;
		border-bottom: 1rpx solid #EDEDED;
		align-items: initial;
	}
	.item-box .icon {
		width: 166rpx;
		height: 166rpx;
		margin-right: 40rpx;	
	}
	.massage-info-box {
		flex: 1;
	}
	.name-box {
		font-size: 37rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}
	.name-box {
		padding-top: 10rpx;
	}
	.name-box .time {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #999999;
	}
	.text-box {
		height: 32rpx;
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #666666;
	}
	// 弹框
	.pop-view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0,0,0,0.7);
	}
	.pop-conte {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 79%;
		padding: 40rpx;
		border-radius: 13rpx;
		background-color: #fff;
		
	}
	.title-box {
		text-align: center;
	}
	.title-box .icon {
		width: 96rpx;
		height: 69rpx;
	}
	.conte-box {
		margin-top: 30rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #333333;
		line-height: 53rpx;
		max-height: 800rpx;
	}
	.btn-box {
		width: 173rpx;
		height: 80rpx;
		background: #232DA7;
		border-radius: 13rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		margin: 50rpx auto 0 auto;
	}
	.no-date{
		text-align: center;
		padding: 20rpx 0;;
	}
</style>